<template>
	<view class="box">
		<!-- 搜索框 -->
		<view class="box_switch">
			<view class="box_switch_left">
				<image class="box_switch_left_imga" src="@/static/icon/home_ic_location.png"></image>
				<text>{{ city }}</text>
				<view class="x"></view>
				<image class="box_switch_left_imgb" src="@/static/icon/ic_search.png" @click="getVenue"></image>
			</view>
			<view class="box_switch_right">
				<input v-model="inputValue" confirm-type="search" placeholder="输入门店名称" @confirm="getVenue" />
			</view>
		</view>
		<!-- 列表 -->
		<view class="box_list">
			<view class="box_list_item" v-for="(item, index) in list" :key="index">
				<view class="box_list_item_s" @click="jumpDesc(item)">
				<!-- <view class="box_list_item_s" @click="jump(item)"> -->
					<view class="box_list_item_a">
						<view class="box_list_item_a_hz"><image :src="item.showLogo"></image></view>
					</view>
					<view class="box_list_item_b">
						<text class="limit-1-line">{{ item.name }}</text>
						<text>营业时间：{{ item.openTimeStart }} ~ {{ item.openTimeEnd }}</text>
						<view class="box_list_item_b_index">
							<u-icon name="map" color="#666666" size="26rpx"></u-icon>
							<text>{{ item.detailedAddress }}</text>
							<u-icon name="arrow-right" color="#666666" size="26rpx"></u-icon>
						</view>
					</view>
				</view>
				<view v-if="item.distance" class="box_list_item_c">
					<view v-if="item.distance">
						<text>{{ item.distance }}km</text>
					</view>
					<!-- <view class="daohan" data-id="{{item.id}}" data-name="{{item.name}}" bindtap="jump">门店详情</view> -->
				</view>
			</view>
		</view>
		<view class="no-list" v-if="!list || list.length == 0">
			<image src="@/static/images/default_empty.png"></image>
			<view>暂无数据</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			inputValue: '',
			list: [],
			city: '场馆'
		};
	},
	onLoad() {
		this.getVenue()
	},
	methods: {
		getLocal(latitude, longitude) {
			this.$app.ajax({
				data: {
					param: {
						lat: latitude,
						log: longitude
					}
				},
				api: this.$api.getCity()
			}).then((res) => {
				this.city = res.record.city
			});
		},
		jumpDesc(item) {
			uni.setStorageSync('venueName', item.name);
			uni.setStorageSync('GYMID', item.id);
			// uni.navigateBack({
			// 	delta: 1
			// });
			uni.navigateTo({
				url: `/pages/venue/detail?title=${item.name}&id=${item.id}`
			});
		},

		// 获取场馆列表
		getVenue() {
			var that = this;
			// 获取当前位置
			this.$app.ajax({
				data: {
					param: {
						name: that.inputValue,
						lat: '',
						lng: '',
						isSearch: '1',
						openStatus: '1'
					}
				},
				api: this.$api.getVenue()
			}).then((res) => {
				this.list = res.recordList
			});
		}
	}
};
</script>

<style lang="scss">
page {
	width: 100%;
	height: 100%;
	padding: 30rpx;
	box-sizing: border-box;
	background: #f7f7f7;
}
.box_switch {
	padding: 30rpx;
	box-sizing: border-box;
	background: #ffffff;
	border-radius: 16rpx;
	display: flex;
	justify-content: space-between;
	position: sticky;
	top: 0;
	left: 0;
	right: 0;
	z-index: 9;
}
.box_switch_left {
	width: 200rpx;
	display: flex;
	flex-shrink: 0;
	align-items: center;
}
.box_switch_right {
	flex: 1;
}
.box_switch_left_imga {
	width: 40rpx;
	height: 40rpx;
}
.box_switch_left_imgb {
	width: 28rpx;
	height: 28rpx;
}
.x {
	width: 1rpx;
	height: 100%;
	margin: 0 25rpx;
	border-right: 1rpx solid #e5e5e5;
}
.box_switch_left text {
	font-size: 26rpx;
	font-weight: 400;
	color: #222222;
	margin-left: 5rpx;
}
.van-search {
	padding: 0 !important;
}
.box_list {
	display: flex;
	flex-direction: column;
	margin-top: 30rpx;
}
.box_list_item {
	padding: 30rpx;
	box-sizing: border-box;
	display: flex;
	margin-bottom: 24rpx;
	background: #ffffff;
	border-radius: 8rpx;
	justify-content: space-between;
}
.box_list_item_a image {
	width: 100%;
	height: 100%;
}
.box_list_item_b {
	margin-left: 30rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.box_list_item_b text:nth-child(1) {
	font-size: 32rpx;
	font-weight: 500;
	color: #222222;
}
.box_list_item_b text:nth-child(2) {
	font-size: 24rpx;
	font-weight: 400;
	color: #333333;
}
.box_list_item_b_index {
	display: flex;
	align-items: center;
}
.box_list_item_b_index text {
	font-size: 22rpx;
	font-weight: 400;
	color: #666666;
	margin-left: 5rpx;
}
.box_list_item_a_hz {
	width: 120rpx;
	height: 120rpx;
	border-radius: 16rpx;
	overflow: hidden;
}
.box_list_item_c {
	text-align: right;
	width: 120rpx;
	flex: none;
}
.box_list_item_c text {
	font-size: 22rpx;
	font-weight: 400;
	color: #666666;
}
.box_list_item_s {
	display: flex;
}
.van-icon {
	z-index: 1;
}
.daohan {
	margin-top: 40rpx;
	width: 100%;
	line-height: 50rpx;
	border: 1px solid #666666;
	border-radius: 10rpx;
	text-align: center;
	color: #4167c1;
	font-size: 26rpx;
}
.daohan image {
	width: 30rpx;
	vertical-align: middle;
	height: 30rpx;
}
</style>
